<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
  #target1 {
    width: 50px;
    height: 50px;
    background: red;
  }

  #target2 {
    width: 50px;
    height: 50px;
    background: green;
  }

  #target3 {
    width: 50px;
    height: 50px;
    background: blue;
  }
  </style>
</head>
<body>
  <div id="target1"></div>
  <div id="target2"></div>
  <div id="target3"></div>

  <script>
    /* globals KeyframeEffect, Animation */
    "use strict";

    let animations = [{
      id: "target1",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        duration: 100,
        iterations: 2,
        iterationStart: 0.25,
        fill: "both"
      }
    }, {
      id: "target2",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        duration: 100,
        iterations: 1,
        iterationStart: 0.25,
        fill: "both"
      }
    }, {
      id: "target3",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        duration: 100,
        iterations: 1.5,
        iterationStart: 2.5,
        fill: "both"
      }
    }];

    for (let {id, frames, timing} of animations) {
      let effect = new KeyframeEffect(document.getElementById(id),
                                      frames, timing);
      let animation = new Animation(effect, document.timeline);
      animation.play();
    }
  </script>
</body>
</html>
